{% extends 'querylog/base.html' %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} 调用量查询{% endblock title %}</title>
    {% block head %}
        <style type="text/css">
            .form-content{
                margin-top: 30px;
                margin-left: 50px;
            }
            .test-port{
                height:20px;
            }
            .code-status{
                margin-top:10px;
            }
            .api_id-content{
                margin-top: 10px;
                margin-left: 20px;
            }
            .text-input-wh{
                margin-top:5px;
                height: 35px;
                width: 250px;
            }
            .btn-content{
                margin-top: 5px;
            }
        </style>
    {% endblock head %}
</head>
<body>
{% block body %}
    <div class="col-lg-12 form-content" id="form-data">
        <form class="form-horizontal" role="form" method="post">
            <div class="col-lg-3 test-port">
                <div id="text-name" class="form-group">
                    <input class="text form-horizontal text-input-wh" id="porname" placeholder="请输入接口名" name="portname">
                </div>
            </div>
            <div class="col-lg-2">
                <div class="form-group code-status">
                    <label>请选择状态：</label>
                    <select name="codestatus" id="code">
                        <option id="name" value="全部">全部</option>
                        <option id="name" value="200">200</option>
                        <option id="name" value="400">400</option>
                        <option id="name" value="401">401</option>
                        <option id="name" value="405">405</option>
                        <option id="name" value="500">500</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-4 api_id-content">
                <div class="form-group">
                    <label>请选择api_id：</label>
                    <select name="api_id" id="apid">
                        <option value="557c656d71f54a7e8f8c681d7a9ab006">557c656d71f54a7e8f8c681d7a9ab006</option>
                        <option value="100.66.225.5">100.66.225.5</option>
                        <option value="100.73.18.118">100.73.18.118</option>
                        <option value="audi">其他</option>
                    </select>

                </div>
            </div>
            <div class="form-group btn-content">
                <input type="button" value="查询" class="btn-content toggle-btn btn-primary" onclick="uploadInfo()">
            </div>
        </form>
    </div>
    <div class="col-lg-12">
        <table>
            <tr><th>ss</th></tr>
            <tr><td>bb</td></tr>
        </table>
    </div>


    <script type="application/javascript">
        function uploadInfo() {
            var name = $('input#porname').val();
            var code = $('#code option:selected').text();
            var api_id = $('#apid option:selected').text();
            alert('name:'+ name +'code:'+code + 'apid:'+ api_id);
            //Ajax CSRF认证使用，若不添加认证，django后端不识别
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                url: "{% url 'query:testreceiveinfo' %}",
                type: 'POST',
                dataType: 'json',
                data: {'name': name, 'code': code,'api_id':api_id},
                success: function (data) {
                    //var info = JSON.parse(data);
                    console.log(data);
                    console.log(data['200'])



                }
            })
        }
    </script>

{% endblock body %}
</body>
</html>